<template>
  <div>

  </div>
</template>

<script setup lang="ts">

</script>

<style scoped>

</style>

<!--&lt;!&ndash;/** AGGrideDemo*/&ndash;&gt;-->
<!--<script setup lang="ts">-->
<!--import { ref } from 'vue';-->
<!--import AgGrid from '@/components/AgGrid.vue';-->

<!--const loading = ref(false);-->

<!--// 行数据可选择-->
<!--const rowSelection = {-->
<!--  // 多选：multiRow ,单选：singleRow-->
<!--  mode: 'multiRow'-->
<!--};-->

<!--// 表头-->
<!--const columnDefs = ref([-->
<!--  {-->
<!--    headerName: '序号',-->
<!--    lockPosition: true, //禁止拖动列的位置-->
<!--    maxWidth: 60,-->
<!--    cellStyle: {-->
<!--      'text-align': 'center'-->
<!--    },-->
<!--    suppressMenu: true,-->
<!--    suppressSorting: true,-->
<!--    valueGetter: (params: any) => {-->
<!--      console.log('params at line 42 in views/AgGridDemo.vue:', params);-->
<!--      return params.node?.rowIndex ?? null;-->
<!--    }-->
<!--  },-->
<!--  {-->
<!--    headerName: '组合标题-Make & Model',-->
<!--    field: 'make',-->
<!--    flex: 0.2, // 宽度占比-->
<!--    valueGetter: (p: any) => {-->
<!--      return p.data.make + ' ' + p.data.model;-->
<!--    },-->
<!--    // children: [-->
<!--    //   // 多级表头-->
<!--    //   { field: 'model', flex: 0.2 },-->
<!--    //   { field: 'price', flex: 0.2 }-->
<!--    // ],-->
<!--    //把该列加入一个选择框，方便进行勾选操作，特别是在多选操作的时候-->
<!--    // checkboxSelection: false,-->
<!--    //头部是否有一个勾选全部的按钮-->
<!--    // headerCheckboxSelection: false,-->
<!--    // filter: false, // 是否显示筛选-->
<!--    // rowSelection: {-->
<!--    //   // 行数据可选择-->
<!--    //   // 多选：multiRow ,单选：single-->
<!--    //   // mode: 'multiRow'-->
<!--    // },-->
<!--    // pinned: 'left', // 列固定-->
<!--    lockPosition: true //禁止拖动列的位置-->
<!--    // resizable: false //是否开启调整列大小，就是拖动改变列大小-->

<!--    // editable: true, // 是否可编辑-->
<!--    // 编辑类型 - agSelectCellEditor：下拉框,agLargeTextCellEditor：长文本-->
<!--    // cellEditor: 'agSelectCellEditor',-->
<!--    // cellEditorParams: {-->
<!--    //   // 编辑类型 - 下拉框参数-->
<!--    //   values: ['Tesla', 'Ford', 'Toyota']-->
<!--    // }-->
<!--  },-->
<!--  {-->
<!--    headerName: '标题',-->
<!--    field: 'make',-->
<!--    lockPosition: true //禁止拖动列的位置-->
<!--  }-->
<!--]);-->

<!--const rowData = ref([-->
<!--  { make: 'Tesla', model: 'Model Y', price: 64950, electric: true },-->
<!--  { make: 'Ford', model: 'F-Series', price: 33850, electric: false },-->
<!--  { make: 'Toyota', model: 'Corolla', price: 29600, electric: false },-->
<!--  { make: 'Mercedes', model: 'EQA', price: 48890, electric: true },-->
<!--  { make: 'Fiat', model: '500', price: 15774, electric: false },-->
<!--  { make: 'Nissan', model: 'Juke', price: 20675, electric: false }-->
<!--]);-->

<!--// 过滤器-->
<!--const defaultColDef = {-->
<!--  flex: 1,-->
<!--  filter: false //所有列开启刷选器-->
<!--};-->

<!--let gridApi = null;-->
<!--let columnApi = null;-->

<!--function onGridReady(val: any) {-->
<!--  gridApi = val.api;-->
<!--  columnApi = val.columnApi;-->

<!--  // 调整表格列宽大小自适应-->
<!--  val.api.sizeColumnsToFit();-->
<!--}-->
<!--</script>-->

<!--<template>-->
<!--  <div class="container">-->
<!--    <div style="width: 100vw; height: 18vh; border: 1px solid orange"></div>-->
<!--    <AgGrid-->
<!--      v-loading="loading"-->
<!--      style="width: 100vw; height: 80vh"-->
<!--      :columnDefs="columnDefs"-->
<!--      :rowData="rowData"-->
<!--      :defaultColDef="defaultColDef"-->
<!--      :pagination="true"-->
<!--      :paginationPageSize="10"-->
<!--      :paginationPageSizeSelector="[10, 20, 30, 50, 100]"-->
<!--      :rowSelection="rowSelection"-->
<!--      @onGridReady="onGridReady"-->
<!--    />-->
<!--  </div>-->
<!--</template>-->

<!--<style lang="scss" scoped></style>-->
